<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <script src="{% static 'jQuery-3.5.1.js' %}"></script>
    <link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
    <script src="/static/js/csrf.js"></script>

    {# <link rel="stylesheet" href="/media/css/{{ blog.site_name }}.css">#}

    <style>
        {% block css %}

        {% endblock %}
    </style>


</head>
<body>
{#导航条开始#}
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            {#            <a class="navbar-brand" href="#">{{ blog.site_title }}</a>#}
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"> {{ username }}个人站点 <span class="sr-only">(current)</span></a></li>
                <li><a href="{{ back_url }}">返回上一页</a></li>
            </ul>
            <form class="navbar-form navbar-left" method="post" action="{% url 'app01_search' %}">
                {% csrf_token %}
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="右边选择搜索对象" id="serach_cont_id" name="content">
                </div>
                <select name="choice" id="select_id" class="form-control">

                    <option value="11"> 资源</option>
                    <option value="10">班级</option>
                    <option value="100">用户</option>
                    <option value="200">文章</option>
                    <option value="300">文件</option>
                </select>
                <input hidden value="{{ request.get_full_path_info }}" name="url">

                <input type="submit" value="提交" class="form-control">
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="/app01/web_home/">返回首页</a></li>
                {% if request.user.is_authenticated %}
                    <li><a href="#">登录用户：{{ request.user.username }}</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">
                            更多操作 <span class="caret"></span></a>
                        <ul class="dropdown-menu"> <!--通过模态框的id来触发模态框-->
                            <li><a href="#" data-toggle="modal" data-target="#myModel">修改密码</a>

                            </li>
                            <li><a href="/app01/change_avatar?url={{ request.get_full_path_info }}">修改头像</a></li>
                            <li><a href="{% url 'app01_backend' %}">个人管理</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="/app01/logout/">退出登录</a></li>

                        </ul>
                        {#修改密码模态框开始#}
                        <!--模态框生效的关键： data-toggle="modal" data-target=".bs-example-modal-lg" id ='Mymodel' -->
                        <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
                             id="myModel">
                            <div class="modal-dialog modal-lg" role="document">
                                <div class="modal-content">
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-md-6 col-md-offset-2">
                                                <h2 class="text-center">修改密码</h2>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="col-md-6 col-md-offset-2">
                                                <div class="form-group">
                                                    <label for="set_user">用户名</label>
                                                    <input type="text" disabled id="set_user"
                                                           value="{{ request.user.username }}"
                                                           class="form-control">

                                                </div>
                                                <div class="form-group">
                                                    <label for="id_old_pwd">原密码</label>
                                                    <input type="password" id="id_old_pwd" class="form-control">


                                                </div>
                                                <div class="form-group">
                                                    <label for="id_new_pwd">新密码</label>
                                                    <input type="password" id="id_new_pwd" class="form-control">

                                                </div>
                                                <div class="form-group">
                                                    <label for="id_confirm_pwd">确认密码</label>
                                                    <input type="password" id="id_confirm_pwd" class="form-control">

                                                </div>
                                                <p><span style="color: red" id="error"></span></p>
                                                <button class="btn btn-success btn-sm" id="id_editer">确定修改</button>
                                                <button type="button" class="btn btn-primary btn-sm"
                                                        data-dismiss="modal">取消修改
                                                </button>
                                                <br>
                                                <br>


                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {#修改密码模态框结束#}
                    </li>



                {% else %}

                    <li><a href="{% url 'app01_register' %}">注册</a></li>
                    <li><a href="{% url 'app01_login' %}">登录</a></li>
                {% endif %}


            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
{#导航条结束#}

{#页面布局开始#}
<div class="container">
    <div>
        <h4 class="">{{ blog.userinfo.username }}个人签名
            <span class="glyphicon glyphicon-send"></span>：{{ blog.site_title }}
            <button id="focu_btn_id" class="btn btn-danger" type="button">
                点击关注 <span class="glyphicon glyphicon-heart"></span>
            </button>
        </h4>


    </div>
    <hr>
    <div class="row">

        {#页面左布局开始   侧边栏     #}
        {% block left_content %}


            <div class="col-md-2">
                {% block files %}
{#                    <h4>#}
{#                        <a href="/app01/site/{{ blog.userinfo.username }}/file?back_url={{ request.get_full_path_info }}"#}
{#                           class=" btn btn-success btn-block">{{ blog.userinfo.username }}共享文件#}
{#                            <span class="glyphicon glyphicon-floppy-save"></span></a>#}
{#                    </h4>#}

                {% endblock %}


{#                筛选框的代码，#}
                {% load my_tag %} <!--加载inclusion_tag函数-->
                {% left_menu username request%} <!-- 调用该html，传递参数 -->

            </div>
        {% endblock %}
        {#页面左布局结束   侧边栏     #}
        {% block content %}


            {#页面右布局开始#}

            <div class="col-md-10">
                {% if is_web != 1 %}
                    {#        文章展示开始#}
                    <h3 class="text-center">用户帖子</h3>
                    {% for page in c_page %}

                        <div class="media"> <!--点击文章标题进入到文章详情页-->
                            <h4 class="media-heading"><a
                                    href="/app01/site/{{ username }}/article/{{ page.id }}?url={{ request.get_full_path_info }}">{{ page.title }}</a>
                            </h4>
                            <div class="media-left">

                                <a href="#"><!--头像-->
                                    <img class="media-object" src="/media/{{ user_obj.avatar }}" alt="加载中" height="64"
                                         width="64">
                                </a>

                            </div>

                            <div class="media-body">
                                <div class="row">

                                    <p> {{ page.desc }}</p>
                                    {#                                <p>{{ page.content|safe }}</p>#}

                                </div>
                                <div class="row ">
                                    <div class="row">
                                        <div class="col-md-6 float-right"></div>
                                        <div class="col-md-6 float-right">
                                            &nbsp;&nbsp;&nbsp;&nbsp;发布于：{{ page.create_time }}&nbsp;&nbsp;
                                            <a href="#">点赞 <span class="glyphicon glyphicon-thumbs-up">{{ page.up_num }}</span></a>&nbsp;&nbsp;&nbsp;&nbsp;
                                            <a href="#"> 踩他<span class="glyphicon glyphicon-thumbs-down">{{ page.down_num }}</span></a>&nbsp;&nbsp;&nbsp;&nbsp;
                                            <a href="#">评论<span class="glyphicon glyphicon-pencil">{{ page.comment_num }}</span></a>

                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>

                        <hr>
                        {% empty %}
                        <h3>没有上传过内容。</h3>
                    {% endfor %}
                    {#    文章展示结束#}
                    </div>
                {% else %}
                    {#               资源库的资源显示开始#}
                    <h3 class="text-center">web资源展示</h3>
                    {% for sou in c_page %}

                        <div class="media">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object" src="/media/{{ sou.uploader.avatar }}" height="60" alt="...">
                                </a>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">资源名称：{{ sou.name }}</h4>
                                <p><a href="/app01/site/{{ sou.uploader.username }}/source_detail/{{ sou.pk }}?pk={{ sou.pk }}&url={{ request.get_full_path_info }}">资源描述：{{ sou.descn }}</a></p>
                            </div>
                        </div>
                        <hr>
                        {% empty %}
                        <h3>该资源分类还没有上传过资源</h3>
                    {% endfor %}


                    {#                资源库的资源显示结束#}

                {% endif %}



            <!--页码的开始-->
            <div class="pager">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        {{ page_html }}
                    </ul>
                </nav>
            </div>
            <!--页码的结束-->
            {#页面右布局结束  #}
        {% endblock %}
    </div>
</div>


{#页面布局结束#}
{% block js %}
    <script>
        $('#id_editer').on('click', function () {
            let old_pwd = $('#id_old_pwd').val()
            let new_pwd = $('#id_new_pwd').val()
            let confirm_pwd = $('#id_confirm_pwd').val()
            $.ajax({
                url: '/app01/set_password/',
                type: 'post',
                data: {
                    'old_pwd': old_pwd,
                    'new_pwd': new_pwd,
                    'confirm_pwd': confirm_pwd,
                    //'csrfmiddlewaretoken':{{ csrf_token }}
                },
                success: function (array) {
                    if (array.code === 1000) {
                        {#parent.location.href='/app01/login/'#}
                        //刷新当前url
                        alert('修改密码成功，重新登录')
                        window.location.reload()
                    } else {
                        $('#error').text(array.msg)
                    }

                }
            })

        });
        // 关注的ajax请求

        $('#focu_btn_id').click(function () {
            $.ajax({
                url: '/app01/focu/user/',
                type: 'get',
                data: {
                    'my_name': '{{ request.user.username }}',
                    'focu_name': '{{ username }}',
                    'url': '{{request.get_full_path_info}}'
                },
                success: function (array) {
                    alert(array.msg)
                }
            })

        })

    </script>

{% endblock %}

</body>
</html>